import React, { useState, useEffect } from "react";



import { Layout, Menu, Breadcrumb, Card } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { Navigate, useNavigate } from "react-router-dom";
import style from '../scc/Shopping.module.css';

import { useNavigate } from "react-router-dom";
import { Outlet } from "react-router-dom";
import { useLocation } from 'react-router-dom'; // 新增：用于监听路由变化
import SideMenu from '../components/SideMenu'; // 新增：导入公共菜单组件

// 路由配置


const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const Home = () => {
    const navigate = useNavigate()

    // 模拟店铺数据
    const [sellerData] = useState({
        storeName: 'FENGDEKUN',
        storeId: '634418210199169',
        followers: 12,
        sold: 32,
        itemCount: 5,
        nearlySoldOut: 6,
        recommendedStock: 3,
        pricingConfirmed: 25,
        newArrivalConfirmed: 2,
        priceAdjustmentConfirmed: 16,
        deduction: 70000.00,
        afterSalesRate: 0.00,
        todaySales: 25,
        sevenDaySales: 2,
        thirtyDaySales: 16
    });

    useEffect(() => {
        // 这里可以替换为实际从后端获取数据的逻辑
        // const fetchData = async () => {
        //     try {
        //         const response = await axios.get('/your-api-url');
        //         setSellerData(response.data);
        //     } catch (error) {
        //         console.error('Error fetching data:', error);
        //     }
        // };
        // fetchData();
    }, []);

    // 新增：高亮状态管理（对应结算管理子项的 key：资金中心'11'、对账中心'12'、资金限制'13'、结算数据'14'）
    const [activeMenuKey, setActiveMenuKey] = useState('11');
    const location = useLocation();

    // 新增：监听路由变化自动同步高亮
    useEffect(() => {
        const pathToKeyMap = {
            '/fund-center': '11',       // 资金中心
            '/reconciliation-center': '12', // 对账中心
            '/fund-limit': '13',        // 资金限制
            '/settlement-data': '14'    // 结算数据
        };
        setActiveMenuKey(pathToKeyMap[location.pathname] || '11');
    }, [location]);

    // 新增：菜单点击事件处理
    const handleMenuItemClick = (e) => {
        setActiveMenuKey(e.key);
    };

    const navigate = useNavigate();
    return (
        <Layout>
            {/* 修改：替换为公共 SideMenu 组件 */}
            <Sider width={200} style={{ background: '#fff' }}>
                <SideMenu 
                    activeMenuKey={activeMenuKey} 
                    onMenuItemClick={handleMenuItemClick}
                />
                <div style={{ position: 'absolute', bottom: 10, width: '180px' }}>
                    <button
                        style={{
                            backgroundColor: '#ff6600',
                            color: 'white',
                            border: 'none',
                            padding: '5px 10px',
                            width: '100%'
                        }}
                        onClick = {()=>navigate('/shopping/buyercenter')}
                    >
                        卖家中心
                    </button>
                </div>
            </Sider>
            <Layout>
                <Header style={{ background: '#fff', padding: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '64px' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span style={{ color: '#ff6600', fontWeight: 'bold', marginRight: '10px' }}>DUK</span>
                            <span style={{ color: '#666' }} onClick={()=> navigate('authorize')}>跨境卖家</span>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Card
                                style={{
                                    background: '#ff6600',
                                    color: 'white',
                                    borderRadius: '4px',
                                    padding: '5px 10px',
                                    marginRight: '10px'
                                }}
                            >
                                Seller Central
                            </Card>
                            <Card
                                style={{
                                    background: '#fff',
                                    color: '#666',
                                    borderRadius: '4px',
                                    padding: '5px 10px',
                                    marginRight: '10px'
                                }}
                            >
                                运营对接
                            </Card>
                            <Card
                                style={{
                                    background: '#fff',
                                    color: '#666',
                                    borderRadius: '4px',
                                    padding: '5px 10px',
                                    marginRight: '10px'
                                }}
                            >
                                反馈
                            </Card>
                            <Card
                                style={{
                                    background: '#fff',
                                    color: '#666',
                                    borderRadius: '4px',
                                    padding: '5px 10px'
                                }}
                            >
                                {sellerData.storeName}
                            </Card>
                        </div>
                    </div>
                </Header>
                
              
                <div style={{ flex: 1, padding: '20px' }}>
                    <Outlet />
                </div>
            </Layout>
        </Layout>
    );
};

export default Shopping;